// import logo from './logo.svg';
// import './App.css';
// import {useState} from 'react';
// import ChartDemo from './components/ChartDemo'
// const Count =()=>{
//   const [count,setcount] = useState(0);
//   return (
//     <div>
//       <p>you clicked {count} times</p>
//       <button onClick={()=>{setcount(count+1)}}>Click me</button>
//     </div>
//   )
// }
// function App() {
//   return (
//     <div className="App">
//       {/* <Count/> */}
//       <ChartDemo />
//     </div>
//   );
// }
import { useState } from "react"; // 引入usestate  定义及修改数据的方法
import './App.css';
const App=()=>{
  const [todos,settodos]=useState([
    {
      content:'Pickup dry cleaning',
      isCompleted:true
    },
    {
      content: 'Get haircut',
      isCompleted: false
    },
    {
      content: 'Build a todo app in React',
      isCompleted: false
    }
  ])
  const toggleTodocompleteAtIndex=(i)=>{
    const newTodos = [...todos];
    // todos 某一条 ！
    newTodos[i].isCompleted = !newTodos[i].isCompleted
    console.log(todos[i]);
    settodos(
      newTodos
    )
  }
  return(
    <div className="app">
      <form className="todo-list">
        <ul>
          {
            todos.map((todo,i)=>(
              <div className={`todo ${todo.isCompleted&&'todo-is-completed'}`}>
                <div className='checkbox' onClick={()=>toggleTodocompleteAtIndex(i)}>
                  {
                    todo.isCompleted && (
                      <span>&#x2714;</span>
                    )
                  }
                </div>
                <input type="text" value={todo.content}/>
              </div>
            ))
          }
        </ul>
      </form>
    </div>
  )
}
export default App;
